require('./PageLogin.styl');
import { Control } from 'react-keeper'
import { monStorage,Storage } from 'clientConfig/util/StoreData';
const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const { Boxs, Button, Group, TextField, Toast, SelectField } = SaltUI;
const Loginlogo = require('images/svg/login.svg');
const ui = require('clientConfig/util/jsapi/ui');
let HBox = Boxs.HBox;
let Box = Boxs.Box;
const monthArray = [
    { value: 0, text: '一月' }, { value: 1, text: '二月' },
    { value: 2, text: '三月' }, { value: 3, text: '四月' }
];
class Login extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: null,
            username: Storage.get('userinfo.account')||'',
            pwd: Storage.get('userinfo.password')||''
        };
        ui.setTitle({title:'登录'})
        // this.handleChange = this.handleChange.bind(this);
    }
    handleTextChange(name, newValue) {
        this.setState({
            [name]: newValue
        });
    }
    handleSumbmit() {
            Actions.check({ pid: this.state.username, pwd: this.state.pwd });
        // if (this.state.username && this.state.pwd) {
        //     Actions.check({ pid: this.state.username, pwd: this.state.pwd });
        // } else {
        //     Toast.show({
        //         type: 'error',
        //         content: '用户名或密码为空'
        //     });
        // }
    }
    render() {
        let t = this;
        return (
            <div className="login">
                <div className="t-FAC">
                    <Loginlogo width='1.866rem' height='1.893rem' />
                </div>
                <div className="t-FAC form t-ML48 t-MR44">
                    <HBox>
                        <Box flex={1}  >
                            <Group.List >
                                <TextField
                                    label="用户名:"
                                    placeholder="请输入用户名"
                                    value={t.state.username}
                                    onChange={t.handleTextChange.bind(t, 'username')}
                                />
                            </Group.List >
                        </Box>
                    </HBox>
                    <HBox className='t-MT17 '>
                        <Box flex={1}  >
                            <Group.List >
                                  <TextField
                                    label="密 码:"
                                    placeholder="输入您的密码"
                                    value={t.state.pwd}
                                    onChange={t.handleTextChange.bind(t, 'pwd')}
                                />
                                {/* <input className='input-password' type="password" name="password" value=''/> */}
                            </Group.List >
                        </Box>
                    </HBox>
                    {/* <HBox className='t-MT17 '>
                        <Box flex={1}  >
                            <Group.List >
                                <SelectField
                                    label="服务器:"
                                    options={monthArray}
                                    onSelect={this.handleChange}
                                    value={this.state.value}
                                    placeholder=""
                                />
                            </Group.List >
                        </Box>
                    </HBox> */}
                    <div><div className="putin t-FAC" onClick={this.handleSumbmit.bind(this)}>登录</div></div>
                </div>
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
        ui.setLeft({ control: true, text: '返回' }, (isSuccessed, result) => {
            ui.close();
        })
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

reactMixin.onClass(Login, Reflux.connect(Store, 'Login'));

module.exports = Login;
